<template>
  <div>
    <div class="container">
      <div class="charts"><customer-charts :addData="addData"></customer-charts></div>
      <div class="charts"><customer-charts2 :spreadData="spreadData"></customer-charts2></div><br>
    </div>
    <h2>客户统计报表</h2>
    <customerTabl></customerTabl>
  </div>

</template>

<script>
import { getCustomerAddData, getCustomerSpreadData } from '@/api/index/index1.js'
import CustomerCharts from '../components/customerCharts'
import CustomerCharts2 from '../components/customerCharts2'
import customerTabl from '../tables/customerTable.vue'
export default {
  components: {
    CustomerCharts, CustomerCharts2, customerTabl
  },
  mounted () {
    console.log('Customer')
    getCustomerAddData().then(response => {
      this.addData = response.data
      this.renderChart()
    })
    getCustomerSpreadData().then(response => {
      this.spreadData = response.data
      this.renderChart()
    })
  },
  data () {
    return {
      addData: {
        labels: ['2023-7-1', '2023-7-2', '2023-7-3', '2023-7-4', '2023-7-5', '2023-7-6', '2023-7-7'],
        values: [0, 0, 0, 0, 0, 0, 0]
      },
      spreadData: [
        { value: 0, name: 'Java' },
        { value: 0, name: 'Python' },
        { value: 0, name: '大数据' },
        { value: 0, name: 'C++' },
        { value: 0, name: 'C#' }
      ]
    }
  }
}
</script>

<style>
.container{
  display: flex;
  margin: 0 auto;
}
.charts{
  width: 50%;
}

</style>

